<template>
	<div id="map"></div>
</template>

<script>
	import { reactive, onMounted } from 'vue'
	import 'ol/ol.css'
	import createWMTSMap from '@/utils/map/createMap'

	export default {
		name: 'use-WMTS-create-map',
		setup() {
			let map = reactive({})
			const { creatMap } = createWMTSMap()

			const initMap = () => {
				map = creatMap(2, '40e50cca6823476482e8721bb2eee900')
			}
			onMounted(() => {
				initMap()
			})
			return {
				map,
				initMap
			}
		}
	}
</script>

<style>
	#map {
		width: 100%;
		height: 100%;
	}
</style>
